<template>
    <div class="box">
        <div class="todoList">
        <Modify :openModify="openModify" @handClose="modifyClose" :modifyData="modifyData" @handlEmit="handlEmit"/>
        <Header @receive="addTodo"></Header>
        <List :ListData="ListData" :checktoDo="checktoDo" :todoDeleteItem="todoDeleteItem" :modifyOpen="modifyOpen"></List>
        <Footer :checkAlltodo="checkAlltodo" @clearAll="clearAll" :doneLen="doneLen" :allTodoLen="allTodoLen"></Footer>
    </div>
    </div>
</template>
<script>
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'
import Modify from './components/modify.vue'
export default {
    computed:{
        allTodoLen(){
            return this.ListData.length
        },
        doneLen(){
           const tempData = this.ListData.filter((item) => {
               return item.done == true
            })
            return tempData.length
        },
        
    },
    components:{
       Header,
        List,
        Footer,
        Modify
    },
    watch:{
        ListData:{
            immediate:true,
            deep:true,
            handler(val) {
            localStorage.setItem('ListData',JSON.stringify(val))
            }
           
        }
    },
    
    data(){
        return {
            openModify:false,
            modifyData:{},
            ListData:JSON.parse(localStorage.getItem("ListData"))||[],
        }
    },
    methods:{
        addTodo(receiveData) {
            this.ListData.unshift(receiveData)
        },
        checktoDo(id) {
            this.ListData.forEach(item => {
                if (item.id == id) {
                    item.done = !item.done
                }
            })
        },
        todoDeleteItem(id){
            this.ListData = this.ListData.filter(item => {
                if(item.id != id) {
                    return item
                }
            })
        },
        clearAll(){
            this.ListData = []
        },
        checkAlltodo(done) {
            this.ListData.forEach((item) => {
                item.done = done
            })
        },
        modifyOpen(id){
            console.log("id=",id);
           this.ListData.forEach((item) => {
              if(item.id == id) {
                  this.modifyData = item
              }
            })
            this.openModify = true
        },
        modifyClose(){
            this.openModify = false
        },
        handlEmit(val) {
            this.ListData.forEach(item => {
                if (item.id == val.id) {
                    console.log("确认秀发：",val);

                    item.context = val.context
                    item.done = val.done
                }
            })
            this.modifyClose()
        }
    }
}
</script>
<style scoped>
.box{
    width: 70vw;
    height: 70vh;
}
    .todoList{
        width: 500px;
        height: 300px;
        position: relative;
        padding: 10px;
        top: 50%;
        left: 50%;
        margin: -100px 0 0 -150px;
        background-color: antiquewhite;
    }
</style>